<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
	<title>架次配套缺料看板</title>
</head>

<body>
    <div class="border-container">
        <div class="name-title tile-size-color">
            架次配套缺料看板
        </div>
        <div class="process-table">
            <div class="process-th">
                <span style="width: 33.33%;">机型</span>
                <span style="width: 33.33%;">架次</span>
                <span style="width: 33.33%;">缺料AO数</span>
            </div>
            <div class="process-td">
                <!-- <ul class="list"></ul> -->
            </div>
        </div>
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
	let scrollInterval;
	const aircraftModels = [
		'JF-17', 'FC-31', 'KJ-2000', 'Y-20', 'ARJ21', 'AG600', 'WZ-8', 'QW-9', 'JH-7', 'JH-11'
	];

	const generateRandomData = () => {
		const processList = [];
		const numberOfEntries = Math.floor(Math.random() * 51) + 50; // 生成50到100之间的随机数

		for (let i = 0; i < numberOfEntries; i++) {
			const millType = aircraftModels[Math.floor(Math.random() * aircraftModels.length)];
			const sortie = Math.floor(Math.random() * 10000) + 1; // 生成1到10000之间的随机数
			const AOCount = Math.floor(Math.random() * 10000) + 1; // 生成1到10000之间的随机数

			processList.push({ millType, sortie, AOCount });
		}

		return processList;
	};
	const updateTable = (processList) => {
		let processHtml = '<ul class="list">';
		processList.forEach(element => {
			const rowClass = element.taskState === '未完成' ? 'red-row' : '';
			processHtml += `<li class="item ${rowClass}">
			<span style="width:33.33%;">${element.millType}</span>
			<span style="width:33.33%;">${element.sortie}</span>
			<span style="width:33.33%;">${element.AOCount}</span>
			</li>`;
		});
		processHtml += '</ul>';

		const $processTd = $(".process-td");

		$processTd.html(processHtml);

		var containerHeight = $processTd.height();
		var itemHeight = $processTd.find('li').outerHeight(true);

		if (processList.length > Math.round(containerHeight / itemHeight)) {
			let a = 0;
			const ls = $processTd.find('li').length;
			scrollInterval = setInterval(function () {
				a++;
				if (a >= ls) {
					clearInterval(scrollInterval);
					// 重置滚动位置
					$processTd.find('ul').stop().css({ marginTop: 0 });
					// 触发数据刷新
					tableScroll();
				} else {
					$processTd.find('ul').stop().animate({ marginTop: -itemHeight * a }, 1000, 'linear');
				}
			}, 2500);
		}
	};

	const tableScroll = () => {
		const processList = generateRandomData();
		updateTable(processList);
	};

	tableScroll();

	// 设置定时器，每10分钟更新一次数据
	setInterval(tableScroll, 10 * 60 * 1000);
});
    </script>
</body>

</html>